<template>
  <el-card ref="wrapper" class="canver-container" :body-style="{ padding: 0 }">
    <el-row v-if="checkHolder" class="select" gutter="80">
      <el-col :span="4"><el-tag>答案:{{ answer }}</el-tag></el-col>
      <el-col :span="3"><el-tag @click="clearLine">清空画布</el-tag></el-col>
      <el-col :span="4">
        <input ref="inputColor" type="color" value="" @change="checkInputColor">
      </el-col>
    </el-row>
    <el-row v-if="checkHolder" class="select">
      <el-col class="line" :span="4">
        <el-radio v-model="lineWidth" label="2">细线</el-radio>
      </el-col>
      <el-col class="line" :span="4">
        <el-radio v-model="lineWidth" label="4">粗线</el-radio>
      </el-col>
      <el-col class="line" :span="4">
        <el-radio v-model="lineWidth" label="6">加粗</el-radio>
      </el-col>
    </el-row>
    <v-stage
      :config="stageConfig"
      @mousedown="mousedownHandler($event)"
      @mousemove="mousemoveHandler($event)"
      @mouseup="mouseupHandler($event)"
      @touchstart="mousedownHandler($event)"
      @touchmove="mousemoveHandler($event)"
      @touchend="mouseupHandler($event)"
    >
      <v-layer>
        <v-line
          v-for="(line, index) in lines"
          :key="index"
          :config="line"
        />
      </v-layer>
    </v-stage>

  </el-card>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      // 画布配置
      stageConfig: {
        width: 800,
        height: 700
      },
      // 线的颜色
      lineColor: '#008080',
      // 线的宽度
      lineWidth: '2',
      // 绘画状态
      painting: false

    }
  },
  computed: {
    ...mapState(['lines', 'answer']),
    ...mapGetters(['isGameStarted', 'checkHolder'])
  },
  mounted() {
    // 将画布宽度设置与容器同宽
    console.log(this.$refs.wrapper.$el.offsetWidth)
    console.log(this.$refs.wrapper.$el.offsetWidth - 100)
    this.stageConfig.width = this.$refs.wrapper.$el.offsetWidth
  },
  methods: {
    clearLine() {
      this.$store.dispatch('clearLine')
    },
    // 更改画笔颜色
    checkInputColor() {
      const color = this.$refs.inputColor.value
      this.lineColor = color
    },
    // 鼠标按下
    mousedownHandler(e) {
      if (!this.isGameStarted || !this.checkHolder) return
      // e.evt.layerX:获取的是pc端当前点击的坐标，如果该值为空则表示当前是移动端
      const X = e.evt.layerX ? e.evt.layerX : e.evt.targetTouches['0'].pageX
      // -123原因: pageY获取的是当前点击的坐标在整个HTMl页面中的坐标，只有-123后才能对应上到canvas中的坐标
      const Y = e.evt.layerY ? e.evt.layerY : e.evt.targetTouches['0'].pageY - 123
      // 标识开始画
      this.painting = true
      // 线对象，points数组中的每两个值代表一个点，两个点之间会自动连成线
      const line = {
        stroke: this.lineColor,
        strokeWidth: this.lineWidth,
        points: [Math.floor(X), Math.floor(Y)]
      }
      // 更新到vuex中
      this.$store.commit('drawNewLine', line)
      // 同步到服务器
      this.$store.dispatch('sendDrawLine', line)
    },
    // 鼠标拖动
    mousemoveHandler(e) {
      // 绘图状态中,vuex中的lines数组中每一个对象代表一条线
      if (this.painting) {
        const X = e.evt.layerX ? e.evt.layerX : e.evt.targetTouches['0'].pageX
        // -123原因: pageY获取的是当前点击的坐标在整个HTMl页面中的坐标，只有-123后才能对应上到canvas中的坐标
        const Y = e.evt.layerY ? e.evt.layerY : e.evt.targetTouches['0'].pageY - 123
        // 取其最后一条线对象
        const lastLine = this.lines[this.lines.length - 1 ]
        // 将拖动中的X，Y添加到points末尾
        lastLine.points = lastLine.points.concat([Math.floor(X), Math.floor(Y)])
        // 更新到vuex中
        this.$store.commit('updateLine', lastLine)
        // 同步到服务器
        this.$store.dispatch('sendUpdateLine', lastLine)
      }
    },
    // 鼠标释放
    mouseupHandler() {
      console.log('鼠标释放')
      this.painting = false
    }
  }
}
</script>
<style scoped>
.select{
  margin-top: 10px;
}
.line{
  padding-left: 1%;
  margin: 0px 20px;
  display: flex;
  align-items: center;
  justify-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>
